<template>
  <div class="view-item">
    <div class="review-left">
      <slot name="content" class="content"></slot>
      <div class="date"><slot name="date"></slot></div>
    </div>
    <div class="review-right">
      <div class="delete" @click="deleteClick">删除</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    itemInfo: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {};
  },

  methods: {
    deleteClick() {
      this.$emit("deleteClick");
    },
  },
};
</script>

<style lang="less" scoped>
.view-item {
  margin: 20px 30px;
  border: 1px solid #c8cccf;
  padding: 10px 15px 6px;
  background-color: #fff;
  display: flex;
  border-radius: 10px; 
  // width: 100%;
}
.review-left {
  font-size: 14px;
  flex: 90%;
  margin-top: 10px;

  table-layout: fixed;
  overflow: hidden;
  word-wrap: break-word; // 以下三行代码主要是给英文和数字设置自动换行
  word-break: break-all; // 设置文字强制换行
  white-space: pre-wrap;
}
// div[name="content"] { // 这样加不上去样式
//   table-layout: fixed;
//   overflow: hidden;
//   word-wrap: break-word;
//   word-break: break-all; // 设置文字强制换行
//   white-space: pre-wrap;
// }
.review-right {
  flex: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
  border-left: 1px solid #d8d3d3;
}
.delete {
  //  position: absolute;
  margin-left: 8px;
  right: 20px;
  font-size: 14px;
  line-height: 14px;
  color: skyblue;
}
.date {
  font-size: 12px;
  margin: 4px 8px 0;
  text-align: right;
}
</style>